<template>
  <div class="numberContainer flex align-center justify-around">
    <div class="numberItem flex align-center">
       <i class="sjcj sjcj-guanlijigou"></i>
       <div>
        <h3 style="color: #1D84C6;">100</h3>
        <p>单位总数</p>
       </div>
    </div>
    <div class="numberItem flex align-center">
       <i class="sjcj sjcj-jichuxinxi"></i>
       <div>
        <h3><span>100</span>/<span>50</span></h3>
        <p>运营数/停运数</p>
       </div>
    </div>
    <div class="numberItem flex align-center">
       <i class="sjcj sjcj-youhuiquanguanli-"></i>
       <div>
        <h3 style="color: #FF9933;">100</h3>
        <p>本年新增数</p>
       </div>
    </div>
    <div class="numberItem numberItemIcon flex align-center justify-center">
      <i class="sjcj sjcj-shangwanghangweiguanliquanjutongji"></i>
    </div>
  </div>
</template>
<script setup name="NumberStatistics">
import { defineProps } from 'vue'
defineProps({
  datas: {
    type: Object,
    default: () => {}
  }
})
</script>
<style lang="scss" scoped>
.numberContainer{
  height: 100%;
  .numberItem{
    i{
      font-size: 36px;
      margin-right: 20px;
    }
    >div{
      padding-top: 2px;
      h3{
        font-size: 32px;
        font-family: "numberFont";
        margin: 0;
        letter-spacing: 2px;
        font-weight: bold;
        span{
          &:nth-of-type(1) {
            color: green;
          }
          &:nth-of-type(2) {
            color: #f33;
          }
        }
      }
      p{
        font-size: 16px;
        font-weight: bold;
        margin: 0;
      }
    }
    &.numberItemIcon{
      i{
        font-size: 80px;
        color: #1c84c6;
        position: relative;
        top: -2px;
      }
    }
  }
}
</style>
